<template>
  <div class="calendar">
    <el-form :inline="true" :model="formData" class="demo-form-inline" >
      <el-form-item label="地块">
        <el-select v-model="formData.soil" placeholder="请选择" class="transparent-select" clearable style="max-width: 120px;">
          <el-option label="地块1" value="地块1" />
          <el-option label="地块2" value="地块2" />
          <el-option label="地块3" value="地块3" />
        </el-select>
      </el-form-item>
      <el-form-item label="农事分类">
        <el-select v-model="formData.type" placeholder="全部" class="transparent-select" clearable style="max-width: 130px;">
          <el-option label="施肥" value="施肥" />
          <el-option label="采收" value="采收" />
          <el-option label="灌溉" value="灌溉" />
          <el-option label="植保" value="植保" />
        </el-select>
      </el-form-item>
      <el-form-item label="农场人员">
        <el-select v-model="formData.people" placeholder="全部" class="transparent-select" clearable style="max-width: 130px;">
          <el-option label="王浩" value="王浩" />
          <el-option label="张三" value="张三" />
        </el-select>
      </el-form-item>
      <el-form-item label="农事状态">
        <el-select v-model="formData.status" placeholder="全部" class="transparent-select" clearable style="max-width: 130px;">
          <el-option label="已完成" value="已完成" />
          <el-option label="未完成" value="未完成" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small">搜索</el-button>
      </el-form-item>
      <el-form-item> 
        <el-button type="warning" size="small">添加临时农事</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang='ts' setup>
import { reactive } from 'vue'
const emits=defineEmits(['addFarm'])
const formData = reactive({
  soil: '',
  type: '',
  people: '',
  status:''
})


</script>

<style lang='scss' scoped>
.calendar {
  width: 98%;
  height: 80px;
  margin-top: 10px;
  background: #132E3F;
  line-height: 90px;
  text-align: center;
  border-radius: 5px;
  box-shadow: 1px 1px 10px .6px gray;
}

.demo-form-inline .el-input {
  text-align: center;
}

.demo-form-inline .el-select {
  --el-select-width: 100px;
}

:deep(.transparent-select .el-select__wrapper) {
  // 触发框背景透明
  background-color: #2C4353 !important;
  // 去除默认边框
  border: none !important;
  // 去除聚焦时的阴影
  box-shadow: none !important;
}
</style>